<%--
  Created by IntelliJ IDEA.
  User: chen
  Date: 17-12-3
  Time: 下午3:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <script src="js/fore/Home.js"></script>
        <style>
            div.homepage-top{
                display: block;
                width: 100%;
                margin: 0 auto;
                height: 36px;
                background: #48484c;
                color: white;
            }
            div.homepage-top a{
                color: white;
                text-decoration: none;
            }
            li {
                display: list-item;
                text-align: -webkit-match-parent;
            }
            div.homepage-top li{
                float: left;
                position: relative;
                display: block;
                line-height: 36px;
                width: 111px;
                height: 36px;
                text-align: center;
                font-size: 14px;
                color: #fff;
            }
            div.homepage-top li.active{
                border-bottom: 3px solid #489eff;
                line-height: 36px;
                height: 36px;
                background: #272729;
                font-weight: 700;

            }
            div.homepage-top li:hover{
                line-height: 36px;
                height: 36px;
                background: #5B5B5B;
            }
            div.homepage-top li.index{
                margin-left: 200px;
            }
            div.product-recommend{
                border: 1px solid #d7d7d7;
                padding: 4px 33px 4px 79px;
                margin-bottom: 10px;
                background: #fff;
                line-height: 1;
            }
        </style>
    </head>
    <body>

        <div class="homepage-top">
            <ul>
                <li class="index active">
                    <a>首页</a>
                </li>
                <li class="seller">
                    <a>我要卖</a>
                </li>
                <li>
                    <a>购物车</a>
                </li>
                <li>
                    <a>我的订单</a>
                </li>
                <li>
                    <a>我的商品</a>
                </li>
                <li>
                    <a>个人中心</a>
                </li>
                <li>
                    <a>帮助中心</a>
                </li>
            </ul>
        </div>

        <div class="product-recommend">
            <div class="content">
                <span class="label label-hot">热门</span>
                <c:forEach items="${categories}" var="category" begin="2" end="8">
                    <a>${category.name}</a>
                </c:forEach>
            </div>
        </div>

        <c:if test="${empty param.categorycount}">
            <c:set var="categorycount" scope="page" value="100"/>
        </c:if>
        <c:if test="${!empty param.categorycount}">
            <c:set var="categorycount" scope="page" value="${param.categorycount}"/>
        </c:if>

        
        <div class="homepage-category-products">
                <c:forEach items="${categories}" var="c" varStatus="stc">
                <c:if test="${stc.count<=categorycount}">
                    <div class="one-category-product">
                        <div class="left-mark"></div>
                        <span class="category-title">
                                ${c.name}
                        </span>
                        <br>
                        <c:forEach items="${c.products}" var="p" varStatus="st">
                            <c:if test="${st.count<=5}">
                                <div class="one-product" >
                                    <a href="product?pid=${p.id}"><img width="100px" src="https://chenbxxx.oss-cn-beijing.aliyuncs.com/tmallCopy_images/productSingle_middle/${p.firstProductImage.id}.jpg"></a>
                                    <a class="productItemDescLink" href="product?pid=${p.id}">
                                        <span class="productItemDesc">[热销]
                                            <!-- 截取name的前20个字符 -->
                                            ${fn:substring(p.name, 0, 20)}
                                        </span>
                                    </a>
                                    <span class="product-price">
                                        ￥<fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/>
                                    </span>
                                </div>
                            </c:if>
                        </c:forEach>
                        <div style="clear:both"></div>
                    </div>
                </c:if>
            </c:forEach>
            <img id="end-png" class="end-png" src="https://chenbxxx.oss-cn-beijing.aliyuncs.com/tmallCopy_images/site/end.png">
        </div>
    </body>
</html>
